<template>
  <div ref="chartContainer" v-chart-resize class="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme

const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['trendQueryChange'])

// 响应式数据
const time = ref(1)
const activeName = ref('1')
const chart = ref(null)
const chartContainer = ref(null)

// 初始化图表
const initChart = () => {
  chart.value = echarts.init(chartContainer.value)
  setOptions(props.chartData)
}

// 生成模拟数据
const generateMockData = (type) => {
  const data = []
  let totalIncome = 0
  let totalDischargeIncome = 0

  // 生成24小时的数据
  for (let i = 0; i < 24; i++) {
    const hour = `${i}点`
    const income = Math.floor(Math.random() * 1000 + 500)
    const dischargeIncome = Math.floor(Math.random() * 200 + 100)

    totalIncome += income
    totalDischargeIncome += dischargeIncome

    data.push({
      time: hour,
      income: income,
      dischargeIncome: dischargeIncome
    })
  }

  return {
    dataList: data,
    totalIncome,
    totalDischargeIncome
  }
}

// 设置图表选项
const setOptions = (data) => {
  if (!chart.value) return

  // 使用模拟数据
  const mockData = generateMockData()

  console.log(mockData)

  chart.value.setOption({
    title: [
      {
        text: '总收益趋势',
        top: 0,
        right: 10,
        textStyle: {
          color: '#fff',
          fontSize: 20,
          fontWeight: 'normal'
        }
      },
      {
        text: mockData.totalIncome + ' 元',
        top: 25,
        right: 10,
        textStyle: {
          color: '#1890FF',
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      {
        text: '总放电趋势收益',
        top: 50,
        right: 10,
        textStyle: {
          color: '#fff',
          fontSize: 20,
          fontWeight: 'normal'
        }
      },
      {
        text: mockData.totalDischargeIncome + ' 元',
        top: 75,
        right: 10,
        textStyle: {
          color: '#00B96B',
          fontSize: 20,
          fontWeight: 'bold'
        }
      }
    ],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '25%',
      containLabel: true
    },
    legend: {
      textStyle: {
        fontSize: 24,
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        fontSize: 22
      },
      // boundaryGap: false,
      data: mockData.dataList.map((item) => item.time)
    },
    yAxis: {
      name: '收益(元)',
      type: 'value',
      nameGap: 30,
      nameTextStyle: {
        fontSize: 24,
        color: '#fff'
      },
      axisLabel: {
        fontSize: 22
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '总收益趋势',
        type: 'line',
        data: mockData.dataList.map((item) => item.income),
        smooth: true,
        showSymbol: true,
        symbol: 'circle',
        symbolSize: 8,
        // label: {
        //   show: true,
        //   position: 'top',
        //   fontSize: 16,
        //   color: '#fff',
        //   formatter: '{c} 元'
        // },
        itemStyle: {
          color: '#1890FF'
        },
        lineStyle: {
          width: 3
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(24,144,255,0.3)'
              },
              {
                offset: 1,
                color: 'rgba(24,144,255,0)'
              }
            ]
          }
        }
      },
      {
        name: '总放电趋势收益',
        type: 'line',
        data: mockData.dataList.map((item) => item.dischargeIncome),
        smooth: true,
        // showSymbol: true,
        // symbolOffset: [0, 10],
        // symbol: 'triangle',
        // symbolSize: 8,
        // label: {
        //   show: true,
        //   position: 'top',
        //   fontSize: 16,
        //   color: '#fff',
        //   formatter: '{c} 元'
        // },
        itemStyle: {
          color: '#00B96B'
        },
        lineStyle: {
          width: 3
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0,185,107,0.3)'
              },
              {
                offset: 1,
                color: 'rgba(0,185,107,0)'
              }
            ]
          }
        }
      }
    ]
  })
}

// 趋势查询变化
const trendQueryChange = () => {
  emit('trendQueryChange', {
    time: time.value,
    type: activeName.value
  })
}

// 监听数据变化
watch(
  () => props.chartData,
  (val) => {
    setOptions(val)
  },
  { deep: true }
)

// 生命周期钩子
onMounted(() => {
  initChart()
})

// onBeforeUnmount(() => {
//   if (chart.value) {
//     chart.value.dispose()
//     chart.value = null
//   }
// })
</script>

<style scoped>
.chartContainer {
  width: 100%;
  height: 100%;
}

.cardHeader {
  height: 28px;
}

.chartTitleIcon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.chartTitle {
  height: 25px;
  margin: 0;
  font-size: 13px;
  line-height: 25px;
  color: #9e9e9e;
}

.chartTitleNum {
  font-size: 16px;
  font-weight: 500;
  color: #fa4700;
}
</style>
